<template lang="pug">
.flex.mb-1.items-center.gap-4
  view.label.text-prim.text-right.pr-2 {{comInfo.label}}
  .add-btn
    picker.w-full(mode="selector" :range="dataList" @change="pickerChange" range-key="name")
      view(v-if="pickerValue") {{ pickerValue.name}}
      view(v-else)  点击选择面料 
.mb-3
 
</template>
<script setup>
import {  selectProductMaterial  } from "@/api/common.js";

const props =  defineProps({
  comInfo:Object,
  form:Object
})
const emit = defineEmits(["change"])
const pickerValue = ref(null);
const dataList = ref([])

onMounted(async ()=>{
  const page = getCurrentPages();
  let crrt = page[page.length-1];
  // console.log(crrt.options);
  await getData(props.comInfo.materialType,crrt.options.id);
  let defaultId =  props.comInfo.value;
  let defaultVal = dataList.value.find(el=>el.id==defaultId);
  if(defaultVal){
    pickerValue.value = defaultVal;
  }
})

async function getData(materialType,id) {
    const res = await selectProductMaterial({
    productId:id,
    materialType:materialType,
  })  ;
  dataList.value = res.rows;
};
function pickerChange(ev){
  pickerValue.value = dataList.value[ev.detail.value];
  emit('change',{id: pickerValue.value.id})
};
 
</script>
<style scoped lang="scss">
@import  "./style.scss";
</style>